<template>
  <el-card class="box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>采购单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="head">
      <el-input
        class="input"
        v-model="input"
        placeholder="请输入内容"
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 6px"
        icon="el-icon-search"
        circle
      ></el-button>
      <el-button @click="showaddpc()" type="success" round>添加</el-button>
    </el-card>
    <el-card class="main">
      <el-row>
        <el-table
          :data="
            Pclist.slice((currentPage - 1) * pagesize, currentPage * pagesize)
          "
          border
          style="width: 100%"
        >
          <el-table-column label="采购单号" type="index" width="150"
            ><template slot-scope="scope">
              <span>{{ scope.row.pcid }}</span>
            </template></el-table-column
          >
          <el-table-column label="订单日期">
            <template slot-scope="scope">
              <span>{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="卖方" width="140px">
            <template slot-scope="scope">
              <span>{{ scope.row.seller }}</span>
            </template>
          </el-table-column>
          <el-table-column label="买方" width="140px">
            <template slot-scope="scope">
              <span text-align="center">{{ scope.row.buyer }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" width="100px">
            <template slot-scope="scope">
              <span text-align="center">{{
                scope.row.ischeck ? "已确认" : "未确认"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-show="!scope.row.ischeck"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="check(scope.$index)"
                >确认</el-button
              >
              <el-button
                @click="showmodify(scope.row, scope.$index)"
                size="mini"
                v-show="!scope.row.ischeck"
                type="success"
                icon="el-icon-message"
                >修改</el-button
              >
              <el-button
                @click="look(scope.row)"
                v-show="scope.row.ischeck"
                size="mini"
                type="info"
                icon="el-icon-message"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="remove(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="采购单详细"
      :visible.sync="editdialogVisible"
      width="70%"
      :before-close="handleClose"
      @close="closed"
    >
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="买方">{{
          modifyForm.buyer
        }}</el-descriptions-item>
        <el-descriptions-item label="卖方">{{
          modifyForm.seller
        }}</el-descriptions-item>
        <el-descriptions-item label="订单日期">{{
          modifyForm.date
        }}</el-descriptions-item>
        <el-descriptions-item label="采购号">{{
          modifyForm.pcid
        }}</el-descriptions-item>
      </el-descriptions>
      <el-table :data="modifyForm.pclist" stripe style="width: 100%">
        <el-table-column prop="brand" label="品牌"></el-table-column>
        <el-table-column prop="type" label="纸种"> </el-table-column>
        <el-table-column prop="rank" label="级别"> </el-table-column>
        <el-table-column prop="perweight" label="克重"> </el-table-column>
        <el-table-column prop="guide" label="规格"> </el-table-column>
        <el-table-column prop="unit" label="单位"> </el-table-column>
        <el-table-column prop="numUnit" label="数量"> </el-table-column>
        <el-table-column prop="num" label="件数"> </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column label="总价">
          <template slot-scope="scope">
            <span type="text">{{ scope.row.price * scope.row.numUnit }}</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="modifyForm.pcid != '' ? '采购单修改' : '采购单添加'"
      :visible.sync="editdialogVisible1"
      width="70%"
      :before-close="handleClose"
      @close="closed"
    >
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="买方">
          <el-input type="text" v-model="modifyForm.buyer"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="卖方">
          <el-select v-model="modifyForm.seller" placeholder="请选择供应商">
            <el-option
              v-for="item in splist"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="订单日期">
          <el-date-picker
            v-model="modifyForm.date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item v-if="modifyForm.pcid != ''" label="采购号">{{
          modifyForm.pcid
        }}</el-descriptions-item>
      </el-descriptions>
      <el-table :data="modifyForm.pclist" border style="width: 100%">
        <el-table-column prop="brand" label="品牌"></el-table-column>
        <el-table-column prop="type" label="纸种"> </el-table-column>
        <el-table-column prop="rank" label="级别"> </el-table-column>
        <el-table-column prop="perweight" label="克重"> </el-table-column>
        <el-table-column prop="guide" label="规格"> </el-table-column>
        <el-table-column prop="unit" label="单位"> </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <el-input
              type="number"
              inputmode="decimal"
              v-model.number="scope.row.numUnit"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="件数">
          <template slot-scope="scope">
            <el-input
              type="number"
              inputmode="decimal"
              v-model.number="scope.row.num"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <el-input
              type="number"
              inputmode="decimal"
              v-model.number="scope.row.price"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总价">
          <template slot-scope="scope">
            <span>{{ scope.row.price * scope.row.numUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="removeitem(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="showadditem()">添加表项</el-button>
        <el-button @click="editdialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="modify()">{{
          modifyForm.pcid == "" ? "添 加" : "修 改"
        }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加表项"
      :visible.sync="editdialogVisible3"
      width="60%"
      :before-close="handleClose"
      @close="closed"
    >
      <el-form
        :model="newitem"
        :rules="addrules"
        ref="addFormRef"
        label-width="70px"
        style="width: 70%"
      >
        <el-form-item label="商品编码" prop="pid">
          <el-select v-model="newitem.index" placeholder="请输入商品编码">
            <el-option
              v-for="(item, index) in options"
              :key="item.id"
              :label="'品牌:' + item.brand + ' type:' + item.type"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订货数量" prop="numUnit">
          <el-input
            placeholder="请输入订货数量"
            type="number"
            inputmode="decimal"
            v-model.number="newitem.numUnit"
          ></el-input>
        </el-form-item>
        <el-form-item label="件数" prop="num">
          <el-input
            placeholder="请输入件数量"
            type="number"
            inputmode="decimal"
            v-model.number="newitem.num"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input
            placeholder="请输入订货单价"
            type="number"
            inputmode="decimal"
            v-model.number="newitem.price"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="additem()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
import {
  getAll,
  modifyif,
  check,
  getopt,
  removebyid,
} from "../../network/PurchaseManage.js";
import { getAll as getSupplier } from "../../network/SupplierManage";
export default {
  data() {
    return {
      splist: [],
      Pclist: [],
      options: [],
      input: "",
      query: "",
      currentPage: 1,
      pagesize: 5,
      adddialogVisible: false,
      editdialogVisible: false,
      editdialogVisible1: false,
      editdialogVisible3: false,
      state: "正常",
      modifyindex: 0,
      modifyForm: {
        pcid: "",
        date: "",
        buyer: "",
        seller: "",
        pclist: [],
      },
      newitem: {
        pid: "",
        numUnit: null,
        num: null,
        price: null,
        index: null,
      },
      addrules: {},
    };
  },
  created() {
    getSupplier().then((res) => {
      this.splist = res.data.obj;
      console.log(this.splist);
    });
    getAll()
      .then((res) => {
        let ret = res.data.obj;
        for (let i = 0; i < ret.length; i++)
          ret[i].pclist = JSON.parse(ret[i].pclist);
        console.log(ret);
        this.Pclist = ret;
      })
      .catch(function (error) {
        console.log(error);
      });
    getopt()
      .then((res) => {
        console.log(res.data);
        this.options = res.data.obj;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  methods: {
    getlist() {
      getAll()
        .then((res) => {
          let ret = res.data.obj;
          for (let i = 0; i < ret.length; i++)
            ret[i].pclist = JSON.parse(ret[i].pclist);
          console.log(ret);
          this.Pclist = ret;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    change() {
      this.editdialogVisible = false;
    },
    change1() {
      this.editdialogVisible1 = false;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getlist() {},
    handleSizeChange(val) {
      console.log(val);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    closed() {
      // this.$refs.addFormRef.resetFields();
    },
    show() {
      this.editdialogVisible = true;
    },
    look(item) {
      this.modifyForm = item;
      console.log(item);
      this.editdialogVisible = true;
    },
    showmodify(item, index) {
      this.modifyForm = item;
      this.modifyindex = index;
      console.log((this.currentPage - 1) * this.pagesize + index);
      this.editdialogVisible1 = true;
    },
    showaddpc() {
      this.modifyForm = {
        pcid: "",
        date: "",
        buyer: "",
        seller: "",
        pclist: [],
      };
      this.editdialogVisible1 = true;
    },
    modify() {
      let temp = JSON.parse(JSON.stringify(this.modifyForm));
      temp.pclist = JSON.stringify(temp.pclist);
      console.log(this.modifyForm);
      if (temp.pcid != "")
        modifyif(temp)
          .then((res) => {
            if (res.data.code == "200") {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              getAll()
                .then((res) => {
                  let ret = res.data.obj;
                  for (let i = 0; i < ret.length; i++)
                    ret[i].pclist = JSON.parse(ret[i].pclist);
                  console.log(ret);
                  this.Pclist = ret;
                })
                .catch(function (error) {
                  console.log(error);
                });
              this.editdialogVisible1 = false;
            } else {
              this.$message("修改失败！");
            }
          })
          .catch(function (error) {
            console.log(error);
            this.$message("error");
          });
      else {
        modifyif({
          buyer: temp.buyer,
          seller: temp.seller,
          pclist: temp.pclist,
          date: temp.date,
        })
          .then((res) => {
            if (res.data.code == "200") {
              this.$message({
                message: res.data.status,
                type: "success",
              });
              this.editdialogVisible1 = false;
              getAll()
                .then((res) => {
                  let ret = res.data.obj;
                  for (let i = 0; i < ret.length; i++)
                    ret[i].pclist = JSON.parse(ret[i].pclist);
                  console.log(ret);
                  this.Pclist = ret;
                })
                .catch(function (error) {
                  console.log(error);
                });
            } else {
              this.$message(res.data.status);
            }
          })
          .catch(function (error) {
            console.log(error);
            this.$message("error");
          });
      }
    },
    check(index) {
      console.log(this.Pclist[(this.currentPage - 1) * this.pagesize + index]);
      check({
        pcID: this.Pclist[(this.currentPage - 1) * this.pagesize + index].pcid,
      })
        .then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "确认成功！",
              type: "success",
            });
            this.Pclist[
              (this.currentPage - 1) * this.pagesize + index
            ].ischeck = true;
          } else {
            this.$message(res.status);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    showadditem() {
      this.newitem = {
        pid: "",
        numUnit: null,
        num: null,
        price: null,
        index: null,
      };
      this.editdialogVisible3 = true;
    },
    additem() {
      this.modifyForm.pclist.push({
        brand: this.options[this.newitem.index].brand,
        guide: this.options[this.newitem.index].guide,
        id: this.options[this.newitem.index].id,
        pid: this.options[this.newitem.index].id,
        perweight: this.options[this.newitem.index].perweight,
        rank: this.options[this.newitem.index].rank1,
        type: this.options[this.newitem.index].type,
        unit: this.options[this.newitem.index].unit,
        num: this.newitem.num,
        numUnit: this.newitem.numUnit,
        price: this.newitem.price,
        total: this.newitem.price * this.newitem.numUnit,
      });
      this.editdialogVisible3 = false;
    },
    removeitem(index) {
      this.modifyForm.pclist.splice(index, 1);
    },
    remove(item, index) {
      this.$confirm("此操作将永久删除该表项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removebyid({
            pcID: item.pcid,
          })
            .then((res) => {
              if (res.data.code == "200") {
                this.$message({
                  message: res.data.status,
                  type: "success",
                });
                this.Pclist.splice(
                  (this.currentPage - 1) * this.pagesize + index,
                  1
                );
              } else {
                this.$message(res.data.status);
              }
            })
            .catch((error) => {
              console.log(error); //异常
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.purchase {
  width: 100%;
  height: 100%;
}
.body {
  width: 100%;
  height: 100%;
}
.box-card {
  margin-inline: 5px;
  min-height: 100%;
  height: 100%;
}
.box-card >>> .el-card__body {
  height: 100%;
}
.head {
  margin-top: 10px;
}
.input {
  width: 300px;
}
.main {
  margin-top: 5px;
}
</style>